<template>
    <div class="box">
        <e-border-box-3 text="自定义" class="border" border-color="#1e80ff" background-color="transparent"
            text-position="right" font-color="#fff">
            <e-dynamic-text text="E-DATAV数据可视化组件" class="text" :colors="['#f53f3f', '#1e80ff']" />
            <div class="draw">
                <e-digital-flop color="#fff" :value="value" :separator="','" />
                <e-water-level-pond backgroundColor="grey" style="width:100px;height:100px;" :value="56" />
                <div class="gauge">
                    <e-gauge-chart :value="66" />
                </div>
                <e-tab style="width:500px;height: 50px;" :items="items" :columns="3" @change="handleClick"></e-tab>
                <e-scroll-ranking-board style="height:250px;width:450px;" :items="itemScroll"
                    @rowClick="handleClickScroll"
                    :highlight-colors="['#FF6E76', '#FFA600', '#FFD600']"></e-scroll-ranking-board>
            </div>
            <a class="a" Target="_blank" href="https://costaq.github.io/scrollRankingBoard.html">官方文档，链接直达。</a>
        </e-border-box-3>
    </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue'
import {
    EBorderBox3, EDigitalFlop, EWaterLevelPond,
    EGaugeChart, ETab, EDynamicText, EScrollRankingBoard
} from 'e-datav-vue3';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
const value = ref(1000)

const items = [
    { label: 'Tab1', value: 'tab1', icon: () => h(MailOutlined) },
    { label: 'Tab2', value: 'tab2', icon: () => h(AppstoreOutlined) },
    { label: 'Tab3', value: 'tab3', icon: () => h(SettingOutlined) }
]
const handleClick = (value: any) => {
    console.log(value);
}
const itemScroll = Array(10).fill(0).map((item, index) => {
    return {
        label: `测试${index}`,
        value: index * 100
    }
})

const handleClickScroll = (value: any, rowIndex: any) => {
    console.log(value, rowIndex);
}
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 10px;

    .border {
        padding: 5px 10px;
        background-color: rgba(0, 0, 0, 0.8);


        .text {
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            padding: 20px;
        }

        .draw {
            display: grid;
            grid-template-columns: repeat(4, 1fr);

            .gauge {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: grey;
            }
        }

        .a {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
    }


}
</style>